@charset "UTF-8";

@import "./util";
@import "./border";

.f-p-0 {
    padding: 0 !important;
}

.f-border {
    @include border(
        $direction: all,
        $size: 1px,
        $color: #ddd,
        $style: solid
    );
}

.f-border-bottom {
    @include border(
        $direction: bottom,
        $size: 1px,
        $color: #ddd,
        $style: solid
    );
}

/* 圆角边框百分比 */
.f-border-radius {
    @include border(
        $direction: all,
        $radius: 50%
    );
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    /* vw2px的使用方式，仅用于临时计算 */
    border-width: vw2px(16);

    background-color: #f8f8f8;
    font-size: px2vw(28);
    font-family: "Microsoft YaHei";
}

.container {
    background-color: #fff;
}

header {
    height: px2vw(300);
    line-height: px2vw(300);
    text-align: center;
    background-color: #f2f2f2;
}

/* 容器宽高比 */
.header {
    @include aspect-ratio(
        // $width: px2vw(600),
        // $sub: ".header-content",
        $aspectX: 375,
        $aspectY: 150
    )
}

nav ul {
    display: flex;
    justify-content: space-around;
    padding: 0;

    li {
        display: flex;
        flex-wrap: wrap;
        width: px2vw(200);
        justify-content: center;
    }

    .icon {
        margin-bottom: px2vw(20);
        width: px2vw(120);
        height: px2vw(120);
        line-height: px2vw(120);
        text-align: center;
        background-color: #f2f2f2;
    }
}

main {
    padding: px2vw(20);

    h3 {
        position: relative;
        margin-top: px2vw(50);
        margin-left: px2vw(26);
        font-size: px2vw(30);

        /* 字体也可以选择不使用rem
            @include font-size(30px);
        */

        &:before {
            content: "";
            position: absolute;
            left: px2vw(-20);
            width: px2vw(12);
            height: 100%;
            background-color: #fc8200;
        }
    }
}

.info-items {
    margin-top: px2vw(20);
    margin-bottom: px2vw(20);
}

.info-item {
    margin-top: px2vw(20);
    padding: px2vw(30);
    padding-left: 0;

    /* 多个边框调用 */
    &:not(.info-item__tel) {
        @include border(
            $direction: all,
            $size: 1px,
            $color: #ddd,
            $style: solid,
            $radius: 50px
        );
    }

    &.info-item__tel {
        @include border(
            $direction: bottom,
            $size: 1px,
            $color: #ddd,
            $style: solid
        );
    }

    &:only-of-type {
        @include border(
            $direction: all,
            $size: 1px,
            $color: #ddd,
            $style: solid
        );
    }

    /* 多个边框的动态更新 */
    &.hover {
        @include border(
            $direction: (top, right, bottom, left),
            $size: (3px, 2px, 1px),
            $color: (#0f0, #ddd),
            $style: dotted
        );
    }

    // border: 1px solid #ddd;

    display: flex;

    span {
        min-width: px2vw(120);
        text-align: center;

        /* 单个边框调用 */
        @include border($direction: right);

        /* 单个边框的动态更新 */
        &.hover {
            @include border($direction: right, $size: 5px, $color: #0f0);
        }

        // border-right: 1px solid #ddd;
    }

    input {
        width: 100%;
        border: none;
        font-size: px2vw(28);
        caret-color: #fc8200;
        outline: none;
    }

    textarea {
        padding: px2vw(20);
        width: 100%;
        border: none;
        height: px2vw(250);
        font-size: px2vw(28);
        font-family: "Microsoft YaHei";
        caret-color: #fc8200;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
}

.info-confirm {
    margin-bottom: px2vw(40);
    text-align: center;

    &__btn {
        display: inline-block;
        margin-top: px2vw(80);
        width: px2vw(200);
        height: px2vw(80);
        line-height: px2vw(80);
        text-align: center;
        background-color: #fc8200;
        text-decoration: none !important;
        color: #fff !important;

    }
}

footer {
    height: px2vw(150);
    line-height: px2vw(150);
    text-align: center;
    background-color: #f2f2f2;
}
